<template>
  <!-- 自定义弹窗组件 -->
  <el-dialog
    :style="dialogWrapperStyle"
    :visible.sync="visible"
    :width="width"
    :height="height"
    :title="title"
    :custom-class="`custom-dialog ${dialogClass}`"
    :modal="true"
    :modal-class="`custom-modal`"
    :close-on-click-modal="closeOnOverlayClick"
    :show-close="false"
    :before-close="handleBeforeClose"
    append-to-body
    @open="handleOpen"
    @close="handleClose"
  >
    <!-- 顶部定位图片 -->
    <div
      v-if="hasTopImage"
      class="dialog-top-image"
      :style="{
        textAlign: topImagePosition,
        top: topImageTop || undefined,
        left: topImageLeft || undefined,
        right: topImageRight || undefined,
      }"
    >
      <!-- 优先使用自定义顶部内容插槽 -->
      <slot name="topContent">
        <!-- 默认显示顶部图片 -->
        <img
          v-if="hasTopImage"
          :src="topImageSrc"
          :alt="topImageAlt || ''"
          class="top-image"
        />
      </slot>
    </div>

    <!-- 自定义关闭按钮（根据位置动态渲染） -->
    <button
      v-if="showCloseBtn"
      class="custom-close-btn"
      :class="`close-${closeBtnPosition}`"
      :style="{
        fontSize: closeBtnSize,
        color: closeBtnColor,
        '--hover-color': closeBtnHoverColor,
        top: closeBtnTop || undefined,
        bottom: closeBtnBottom || undefined,
        left: closeBtnLeft || undefined,
        right: closeBtnRight || undefined,
      }"
      @click="handleCloseBtnClick"
    >
      <i class="el-icon-close"></i>
    </button>

    <!-- 自定义内容区域 -->
    <div class="dialog-content">
      <slot name="content"></slot>
    </div>

    <!-- 底部按钮区域（自定义） -->
    <template #footer>
      <slot name="footer">
        <!-- 默认底部按钮（如果未自定义则显示） -->
        <!-- <el-button @click="handleCloseBtnClick">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button> -->
      </slot>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: "CustomElDialog",
  props: {
    // 控制显示/隐藏（支持 .sync 修饰符）
    visible: {
      type: Boolean,
      default: false,
    },
    // 弹窗宽度（支持 px/%）
    width: {
      type: String,
      default: "50%",
    },
    // 弹窗高度（支持 px/auto）
    height: {
      type: String,
      default: "auto",
    },
    // 弹窗标题
    title: {
      type: String,
      default: "",
    },
    // 遮罩层背景色
    overlayBgColor: {
      type: String,
      default: "rgba(0,0,0,0.7)",
    },
    // 关闭按钮位置（top-left/top-right/bottom-left/bottom-right）
    closeBtnPosition: {
      type: String,
      default: "top-right",
      validator: (val) =>
        ["top-left", "top-right", "bottom-left", "bottom-right"].includes(val),
    },
    // 关闭按钮顶部距离（优先级高于默认位置）
    closeBtnTop: {
      type: String,
      default: "",
    },
    // 关闭按钮底部距离（优先级高于默认位置）
    closeBtnBottom: {
      type: String,
      default: "",
    },
    // 关闭按钮左侧距离（优先级高于默认位置）
    closeBtnLeft: {
      type: String,
      default: "",
    },
    // 关闭按钮右侧距离（优先级高于默认位置）
    closeBtnRight: {
      type: String,
      default: "",
    },
    // 关闭按钮大小（支持px等单位）
    closeBtnSize: {
      type: String,
      default: "25px",
    },
    // 关闭按钮颜色
    closeBtnColor: {
      type: String,
      default: "#323232",
    },
    // 关闭按钮悬停颜色
    closeBtnHoverColor: {
      type: String,
      default: "#26426C",
    },
    // 是否显示关闭按钮
    showCloseBtn: {
      type: Boolean,
      default: true,
    },
    // 弹窗背景色
    dialogBgColor: {
      type: String,
      default: "#fff",
    },
    // 弹窗背景图片（优先级高于背景色）
    // 弹窗背景图片（优先级最高）
    dialogBgImage: {
      type: String,
      default: "",
    },
    // 弹窗渐变背景（优先级低于背景图片，高于纯色背景）
    dialogBgGradient: {
      type: String,
      default: "",
    },
    // 是否显示顶部定位图片
    hasTopImage: {
      type: Boolean,
      default: false,
    },
     // 顶部定位图片顶部距离（支持px等单位，优先级高于默认值）
     topImageTop: {
      type: String,
      default: "",
    },
    // 顶部定位图片左侧距离（支持px等单位）
    topImageLeft: {
      type: String,
      default: "",
    },
    // 顶部定位图片右侧距离（支持px等单位）
    topImageRight: {
      type: String,
      default: "",
    },
    // 顶部定位图片地址
    topImageSrc: {
      type: String,
      default: "",
    },
    // 顶部定位图片alt属性
    topImageAlt: {
      type: String,
      default: "",
    },
    // 顶部定位图片位置（left/center/right）
    topImagePosition: {
      type: String,
      default: "center",
      validator: (val) => ["left", "center", "right"].includes(val),
    },
    // 点击遮罩层是否关闭
    closeOnOverlayClick: {
      type: Boolean,
      default: true,
    },
    // 自定义弹窗类名
    dialogClass: {
      type: String,
      default: "",
    },
    // 弹窗圆角大小（支持px、%、rem等单位）
    dialogRadius: {
      type: String,
      default: "15px",
    },
    // 弹窗边距（支持px、%、auto等单位，可设置单个值或多个值）
    dialogMarginTop: {
      type: String,
      default: "",
    },
    // 整个遮罩层最外侧区域样式，可以控制内侧弹窗的区域
    dialogWrapperStyle: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    // 动态计算弹窗样式
    dialogStyle() {
      const style = {
        backgroundColor: this.dialogBgColor,
        height: this.height,
        borderRadius: this.dialogRadius, // 新增的圆角属性
      };
      if (this.dialogBgImage) {
        style.backgroundImage = `url("${this.dialogBgImage}")`;
        style.backgroundSize = "cover";
        style.backgroundRepeat = "no-repeat";
      } else if (this.dialogBgGradient) {
        // 如果有渐变背景，设置背景图片为渐变
        style.backgroundImage = this.dialogBgGradient;
        // 如果有渐变背景，移除背景色设置
        delete style.backgroundColor;
      }
      return style;
    },
  },
  watch: {
    // 监听遮罩层背景色变化并应用
    overlayBgColor(newVal) {
      this.updateOverlayStyle(newVal);
    },
  },
  mounted() {
    // 初始化遮罩层样式
    this.updateOverlayStyle(this.overlayBgColor);
    // 应用弹窗背景样式
    this.applyDialogStyle();
  },
  methods: {
    // 更新遮罩层样式
    updateOverlayStyle(color) {
      const modal = document.querySelector(".custom-modal");
      if (modal) {
        modal.style.backgroundColor = color;
        modal.style.display = "flex";
      }
    },
    // 应用弹窗背景样式
    applyDialogStyle() {
      const dialog = this.$el.querySelector(".el-dialog");
      if (dialog) {
        Object.keys(this.dialogStyle).forEach((key) => {
          dialog.style[key] = this.dialogStyle[key];
        });
      }
    },
    // 关闭按钮点击事件
    handleCloseBtnClick() {
      this.$emit("update:visible", false);
      this.$emit("close");
    },
    // 确认按钮点击事件（默认底部按钮）
    handleConfirm() {
      this.$emit("confirm");
      this.handleCloseBtnClick();
    },
    // 弹窗打开时触发
    handleOpen() {
      this.$nextTick(() => {
        this.updateOverlayStyle(this.overlayBgColor);
        this.applyDialogStyle();
      });
      this.$emit("open");
    },
    // 弹窗关闭时触发
    handleClose() {
      this.$emit("close");
    },
    // 关闭前回调
    handleBeforeClose(done) {
      this.$emit("before-close", done);
    },
  },
};
</script>

<style scoped lang="scss">
/* 基础弹窗样式扩展 */
.custom-dialog {
  overflow: hidden;
}

/* 内容区域样式 */
.dialog-content {
  padding: 10px 0;
}

/* 顶部定位图片样式 */
.dialog-top-image {
  position: absolute;
  top: -30px; /* 超出弹窗顶部 */
  left: 0;
  right: 0;
  z-index: 10; /* 确保在弹窗之上 */
}

.top-image {
  max-height: 60px;
  max-width: 80%;
  vertical-align: middle;
}

/* 自定义关闭按钮样式 */
.custom-close-btn {
  position: absolute;
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #909399;
  z-index: 10;
  padding: 5px;
  transition: color 0.2s;
}

.el-icon-close:hover {
  color: var(--hover-color);
}

.custom-close-btn .el-icon-close {
  font-size: 20px;
  font-size: inherit;
}

/* 关闭按钮位置 */
.close-top-left {
  top: 15px;
  left: 15px;
}

.close-top-right {
  top: 15px;
  right: 15px;
}

.close-bottom-left {
  bottom: 15px;
  left: 15px;
}

.close-bottom-right {
  bottom: 15px;
  right: 15px;
}
::v-deep .el-dialog {
}
/* 修复Element UI默认样式冲突 */
::v-deep .el-dialog__header {
  padding: 20px 20px 10px;
}

::v-deep .el-dialog__body {
  padding: 10px 20px;
  // 暂时注释 后续有需要打开
  // max-height: calc(100vh - 220px);、
  overflow-y: auto;
}

::v-deep .el-dialog__footer {
  padding: 10px 20px 20px;
}

/* 确保遮罩层覆盖导航栏 */
::v-deep .custom-modal {
  z-index: 2002 !important; /* 高于Element默认遮罩层z-index */
}
</style>
